<template>
  <div style="width: 1300px;margin-left: 10px">
    <el-card>
      <el-row :gutter="10">
        <el-col :span="22">
          <h1>箱格详情</h1>
        </el-col>
        <el-col :span="2">
          <i class="el-icon-delete-solid" style="margin-bottom: 50px; color: deepskyblue">返回</i>
        </el-col>
      </el-row>
      <hr>
      <el-row :gutter="20" style="overflow: hidden">
        <el-col :span="8">
          <el-row :gutter="10">
            <el-col :span="8">
              <img src="/imgs/detail.png" style="width: 120px;margin-top: 5px">
            </el-col>
            <el-col :span="8">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="柜机编码">
                </el-form-item>
                <el-form-item label="所在地区">
                </el-form-item>
                <el-form-item label="详细地址">
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-form ref="form" :model="form" label-width="80px" style="margin-left: 0">
                <el-form-item label="1010">
                </el-form-item>
                <el-form-item label="MolinboxC903">
                </el-form-item>
                <el-form-item label="DOSON32">
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" style="text-align: center;line-height: 60px">
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="所在地址">
                </el-form-item>
                <el-form-item label="箱格状况">
                </el-form-item>
                <el-form-item label="柜机状态">
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="14">
              <el-form ref="form" :model="form" label-width="160px">
                <el-form-item label="宁波工程学院翠柏校区">
                </el-form-item>
                <el-form-item label="10/20">
                </el-form-item>
                <el-form-item label="正常">
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="安装日期">
                </el-form-item>
                <el-form-item label="开通日期">
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="14">
              <el-form ref="form" :model="form" label-width="160px">
                <el-form-item label="2023-11-06">
                </el-form-item>
                <el-form-item label="2023-11-06 17:00:00">
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="2">
          <el-select v-model="select" slot="prepend" placeholder="箱门状态" style="width: 100px;margin-bottom: 20px">
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select v-model="select" slot="prepend" placeholder="2023-11-06 至 2023-11-06" style="width: 215px">
          </el-select>
        </el-col>
        <el-col :span="14">
        </el-col>
      </el-row>

      <el-table
          :data="tableData"
          border
          style="width: 100%;">
        <el-table-column
            fixed
            prop="date"
            label="开箱时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="name"
            label="关箱时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="province"
            label="类型"
            width="120">
        </el-table-column>
        <el-table-column
            prop="city"
            label="操作人"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="手机号码"
            width="300">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="时长"
            width="120">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="箱门状态"
            width="120">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },
  onSubmit() {
    console.log('submit!');
  },

  data() {
    return {
      tableData: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  }
}

</script>

<style scoped>

</style>